<template>
    <div class="model-page">
      <div class="page-full-guidelines">
        <topHeader title="穿衣指南"></topHeader>
        <header class='nav_wrap'>
          <div class='item' :class="{'active':curTab==idx}" 
                v-for="(i,idx) in tablist" :key="idx" 
                @click='onTabItem(idx)'>
            <span>{{i}}</span>
          </div>
        </header>

        <div class='logo_wrap'>
          <img src="../../../static/image/cyzl/mryj_logo.png" alt="" srcset="">
        </div>

        <div class="clear"></div>

        <div class='time_wrap'>
          <div class='v0'>{{fetch_data.year}}</div>
          <div class='v1'>{{fetch_data.day}}</div>
          <div class='v2'>{{week}}</div>
        </div>

        <div class='date_wrap'>
          <p class='time'>{{fetch_data.lunar}}</p>
          <div class='des'>
            <p class='v0'>{{fetch_data.tgdz}}</p>
            <p class='v1'>{{fetch_data.cxfgod}}</p>
          </div>
        </div>

        <!-- 宜忌b -->
        <div class='yj_wrap'>
          <div class='item'>
            <img src='../../../static/image/cyzl/mryj_i_yi.png'/>
            <div class='info'>{{fetch_data.yi}}</div>
          </div>

          <div class='item'>
            <img src='../../../static/image/cyzl/mryj_i_ji.png'/>
            <div class='info'>{{fetch_data.ji}}</div>
          </div>
        </div>
        <!-- 宜忌e -->

        <section class='suggest_wrap'>
          <div class='title'>
            <img src='../../../static/image/cyzl/mryj_jy.png'/>
          </div>

          <ul class='list'>
            <li class='item'>
              <div class='shuxin'>属
                <span>木</span>
              </div>
              <div class='right'>
                <p class='fit'>
                  <span class='icon i_yi'></span>
                  <span>{{mu[0][0]}}，{{mu[0][1]}}</span>
                </p>
                <p class='fit'>
                  <span class='icon i_ji'></span>
                  <span>{{mu[1][0]}}，{{mu[1][1]}}</span>
                </p>
              </div>
            </li>
           
           <li class='item'>
              <div class='shuxin'>属
                <span>火</span>
              </div>
              <div class='right'>
                <p class='fit'>
                  <span class='icon i_yi'></span>
                  <span>{{huo[0][0]}}，{{huo[0][1]}}</span>
                </p>
                <p class='fit'>
                  <span class='icon i_ji'></span>
                  <span>{{huo[1][0]}}，{{huo[1][1]}}</span>
                </p>
              </div>
            </li>

            <li class='item'>
              <div class='shuxin'>属
                <span>土</span>
              </div>
              <div class='right'>
                <p class='fit'>
                  <span class='icon i_yi'></span>
                  <span>{{tu[0][0]}}，{{tu[0][1]}}</span>
                </p>
                <p class='fit'>
                  <span class='icon i_ji'></span>
                  <span>{{tu[1][0]}}，{{tu[1][1]}}</span>
                </p>
              </div>
            </li>

            <li class='item'>
              <div class='shuxin'>属
                <span>金</span>
              </div>
              <div class='right'>
                <p class='fit'>
                  <span class='icon i_yi'></span>
                  <span>{{jin[0][0]}}，{{jin[0][1]}}</span>
                </p>
                <p class='fit'>
                  <span class='icon i_ji'></span>
                  <span>{{jin[1][0]}}，{{jin[1][1]}}</span>
                </p>
              </div>
            </li>

            <li class='item'>
              <div class='shuxin'>属
                <span>水</span>
              </div>
              <div class='right'>
                <p class='fit'>
                  <span class='icon i_yi'></span>
                  <span>{{shui[0][0]}}，{{shui[0][1]}}</span>
                </p>
                <p class='fit'>
                  <span class='icon i_ji'></span>
                  <span>{{shui[1][0]}}，{{shui[1][1]}}</span>
                </p>
              </div>
            </li>
          </ul>

          <p class='des'>
            穿上对应五行颜色的衣服，不仅可以
            <span>提升运气</span>，在商务谈判、人际关系、财运增幅等方面同样有着较大的
            <span>正面作用。</span>
          </p>
        </section>
        <div class="btn_box">
          <p class="btn_share" @click="sharePop">分享好友</p>
          <p class="btn_resolve" @click="toMaster">专业解答</p>
        </div> 
        <!-- <div class='btn_wrap'>
          <button class='btn' @click='isShowPop()'></button>
          <button class='btn btn1' @click='baocun()'></button>
        </div> -->

        <!-- 弹窗复制微信 b-->
        <!-- <div class='pop_contract_wrap' v-show='popToast'>
          <div class='Ttoast'>
            <img class='close' src='https://ykdstatic.52dd.cn/oss/wxmini/img/mryj_i_close.png' @click='isShowPop()'/>
            <p class='tip_head'>
              添加大师微信，<span>了解你的五行</span>更有大师为你<span>解答疑惑</span>
            </p>
            <div class='tip_body'>
              <div class='wx_hao'><img src='https://ykdstatic.52dd.cn/oss/wxmini/img/mryj_wx.png'/>微信号：{{kefuWx}}</div>
              <div id="wxchatCopy" class='wx_btn' data-clipboard-text='2865880' @click='copyWechat'>复制号码</div>
            </div>
          </div>
        </div> -->
        <!-- 弹窗复制微信 e-->
        <share :ShareParams="ShareParams" :showShareStatus="showShareStatus" @changeStatus='showShareStatus=$event'></share>

        <!-- 广告 -->
        <theAdvertis :adProp='adProp'></theAdvertis>
      </div>
    </div>
</template>

<script>
import topHeader from '@/components/topHeader'
import theAdvertis from '@/components/the-advertis';
import tool from '@/assets/js/tool'
import { constants } from 'crypto';
import { setTimeout } from 'timers';
import share from '@/components/sharePopup';
export default {
    name:'guidelines',
    components:{
      topHeader,
      share,
      theAdvertis
    },
    data(){
        return{
           tablist: ['今日', '明日'],
           curTab: 0,
           curTabPanel: 0,
           fetch_data:{},
           api_date:{},
           week:'',
           mu:[[''],['']],
           huo:[[''],['']],
           tu:[[''],['']],
           jin:[[''],['']],
           shui:[[''],['']],
           popToast:false,
           kefuWx:'2865880',
          ShareParams:{
            'shareLink': 'https://cs.52dd.cn/mryj/index.html',
            'shareTitle': '今日穿衣指南',
            'shareContent': '每日宜忌，穿衣颜色指南',
            'shareThumbs': ['static/image/public/defaultHeader.png']
          },
          showShareStatus:false,
          adProp:{
            gid:4,
            type:1,
            position:4
          }
        }
    },
    created(){
      this.$store.commit('changePageLoading',true);
      this.fetch_page();
    },
    methods:{
      onTabItem(index){
        this.curTab = index;
        if(index==0){
          this.fetch_data = this.api_date.today;
        }else{
          this.fetch_data = this.api_date.nextday;
        }
        this.week = this.fetch_data.weeks.split(' ')[0].replace(/周/, '星期');
      },
      fetch_page(){
        var self = this;
        self.$fetch.post('https://api.52dd.cn/v1/Daygoodbad/detail',{}).then((res)=>{
          if(res.code ==1){
            self.api_date = res.data;
            self.fetch_data = res.data.today;
            self.week = self.fetch_data.weeks.split(' ')[0].replace(/周/, '星期');
            self.mu = self.fetch_data.mu;
            self.huo = self.fetch_data.huo;
            self.tu = self.fetch_data.tu;
            self.jin = self.fetch_data.jin;
            self.shui = self.fetch_data.shui;
            // self.dataYj =[...mu,...huo,...tu,...jin,...shui];//此时奇数为宜，偶数为忌
            self.$store.commit('changePageLoading',false);
          }
        });
      },
      isShowPop(){
        this.popToast=!this.popToast;
      },
      copyWechat(){
        tool.copyContent(this,'#wxchatCopy');
        setTimeout(function(){
          window.location.href = "weixin://";
        },500)
      },
       toMaster() {
        this.$router.push('/askTeacher?isMiddlePage=1')
      },
      sharePop(){
        this.showShareStatus=!this.showShareStatus;
      },
    }
}
</script>

<style lang="less">
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
</style>


